import { Center, Container, Loader, Paper } from "@mantine/core";
import { useQuery } from "react-query";
import { useParams } from "react-router-dom";
import { GetUserAsync } from "../api/UserService";
import Error from "../components/Error/Error";
import UserCard from "../components/Users/UserCard";
import FetchError from "../models/FetchError";
import NotAuthPage from "./NotAuthPage";
import NotFoundPage from "./NotFoundPage";

export default function UserPage() {

	const params = useParams();

	const { data, isLoading, isError, error } = useQuery('getUser', async () => await GetUserAsync(params.userid as string), { refetchOnWindowFocus: false, retry: 1 });

	if (isLoading) {
		return (
			<Center>
				<Loader color="red" />
			</Center>
		)
	}

	if (isError) {
		const e = (error as FetchError)?.response?.status;

		if (e === 403 || e === 401)
			return <NotAuthPage />

		if (e === 404)
			return <NotFoundPage />

		return (
			<Error
				color="red"
				title="Кажется, что-то сломалось"
				description="Пожалуйста, сообщите об этом администратору сайта"
			/>
		);
	}

	return (
		<Container>
			<Paper shadow="xl" p="xs">
				<UserCard person={data} />
			</Paper>
		</Container>
	)
}
